<template>
  <q-page class="q-pa-md wrapBox">
      <div class="nav">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>
            <el-image src="/svgs/algManagementIcon.svg" style="width: 17px;margin-top: 2px" fit />
          </el-breadcrumb-item>
          <el-breadcrumb-item>算法服务</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ name: 'alg-manage' }">算法管理</el-breadcrumb-item>
          <el-breadcrumb-item><span style=" color: #333;">算法详情</span></el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="userData textColor borderBottom">
        <div style="display: flex;justify-content: space-between">
          <div class="title">算法详情</div>
          <el-button type="primary" size="small" style="margin: 12px 12px 0 0" @click="toCreateModelManage">训练</el-button>
        </div>
        <div class="contentBox">
          <div class="row">
            <div>名称：</div>
            <div> {{ detailData.title }}</div>
          </div>
          <div class="row">
            <div>ID：</div>
            <div><i style="font-style: inherit;" v-if="detailData.title.length>0">{{ detailData.id }}</i></div>
          </div>
          <div class="row">
            <div>描述：</div>
            <div class="q-pa-md">
                <div class="cursor-pointer">
                  {{ descriptionModel }} <el-icon v-if="detailData.title.length>0"><EditPen /></el-icon>
                  <q-popup-edit v-model="descriptionModel"  v-slot="scope" @hide="setDescription(descriptionModel)">
                    <q-input v-model="scope.value" dense autofocus counter @update:model-value="changeInput(scope.value)"
                             @keyup.enter="setDescription(scope.value)" />
                  </q-popup-edit>
                </div>
              </div>
          </div>
        </div>
      </div>
      <div class="userData textColor">
        <div class="contentBox">
          <div class="row">
            <div>代码仓库：</div>
            <div>{{ detailData.git_vendor }}</div>
          </div>
          <div class="row">
            <div>仓库地址：</div>
            <div>{{ detailData.git_uri }}</div>
          </div>
          <div class="row">
            <div>预置框架：</div>
            <div>{{ detailData.git_vendor }}</div>
          </div>
          <div class="row">
            <div>代码目录：</div>
            <div>{{ detailData.git_version }}</div>
          </div>
        </div>
      </div>
  </q-page>
</template>

<script setup lang="ts">
import { ref, shallowRef } from 'vue';
import { useRouter } from 'vue-router';
import { getAlgDetail, putAlgDetailData } from 'src/api/model'
import { modelStore } from 'src/stores/model';
const router = useRouter()
const projectId = router.currentRoute.value.params.project_id
const modelId = modelStore().model_id
const descriptionModel=ref()
const detailData = shallowRef({
  title: '',
  id: 0,
  description: '',
  git_uri:'',
  git_vendor: '',
  git_version: ''
});
const toCreateModelManage = () => {
  modelStore().setShowModelId(modelId);
  router.push({ name: 'model-manage-create', params: { project_id: projectId } })
}
getData();
function getData() {
  getAlgDetail(projectId, modelId).then((res: any) => {
    detailData.value = res.data
    descriptionModel.value=detailData.value.description
  }).catch(error=>{
    console.log(error)
  })
}
function changeInput(str:string){
  descriptionModel.value=str
}
function setDescription(str:string){
  putAlgDetailData(projectId, modelId,{description:str}).then((res: any) => {
    detailData.value = res.data
    descriptionModel.value=detailData.value.description
  }).catch(error=>{
    console.log(error)
  })
}
</script>

<style scoped lang="scss">
.nav {
  display: flex;
  align-items: center;
  padding-left: 20px;
  cursor: pointer;
  background-color: var(--nav-bg-color);
  height: 46px;
  ::v-deep .el-breadcrumb{
    display: flex;
    align-items: center;
  }
}
.wrapBox {
  padding: 0 !important;
  .userData {
    margin: 0 20px;
    .title{
      width: 100%;
      padding: 12px;
      box-sizing: border-box;
      background-color: #fff;
      color: #333;
      font-weight: bold;
      text-align: left;
      line-height: 24px;
      border-bottom: 2px solid #f6f8fa;
    }
    .contentBox {
      padding: 32px 40px 40px 40px;
      background-color: #ffffff !important;
      .demo-tabs{
        margin-top: 40px;
      }
    }
  }
}
//面包屑斜杆
::v-deep .el-breadcrumb__separator{
  font-size: 12px!important;
  color: #c9cdd4!important;
  margin-top: 2px!important;
}
//面包屑字体颜色
::v-deep .el-breadcrumb__inner{
  color: #666!important;
}
::v-deep .el-tabs__active-bar{
  display: none;
}
::v-deep .el-breadcrumb__inner.is-link, .el-breadcrumb__inner a{
  font-weight: normal!important;
}
.userData {
  width: 96%;
  margin: 0 auto;
  margin-bottom: 20px;
  .q-pa-md{
    padding: 0;
    width: 50%;
  }
  .row {
    margin-bottom: 20px;
  }
}
.borderBottom{
  border-bottom: 1px solid #ddd;
}
</style>
